```svelte
<script lang="ts">
  import * as radio from "@zag-js/radio-group"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const items = [
    { label: "React", value: "react" },
    { label: "Angular", value: "ng" },
    { label: "Vue", value: "vue" },
    { label: "Svelte", value: "svelte" },
  ]
  const id = $props.id()
  const service = useMachine(radio.machine, {
    id,
    name: "fruit",
    orientation: "horizontal",
  })
  const api = $derived(radio.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getIndicatorProps()}></div>
  {#each items as opt}
    <label {...api.getItemProps({ value: opt.value })}>
      <span {...api.getItemTextProps({ value: opt.value })}>
        {opt.label}
      </span>
      <input {...api.getItemHiddenInputProps({ value: opt.value })} />
    </label>
  {/each}
</div>
```
